<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :lg="2" :md="4" :sm="4" :xl="4" :xs="4">
        <el-card class="access" shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              产品分类
            </div>
          </div>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item
              v-for="(item, index) in menuData"
              :key="index"
              @click="handleOpen(item)"
            >
              <span>{{ item }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="8" :sm="8" :xl="8" :xs="8">
        <el-card class="access" shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              产品信息
            </div>
          </div>
          <div>
            <el-table :data="tableData" height="280">
              <el-table-column label="项" prop="ProductId" />
              <el-table-column label="值" prop="ProductName" />
              <el-table-column
                align="center"
                label="操作"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-button text type="primary" @click="setStep(scope.$index)">
                    查询
                  </el-button>
                </template>
              </el-table-column>
              <template #empty>
                <el-empty class="vab-data-empty" description="暂无数据" />
              </template>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="16" :md="12" :sm="12" :xl="12" :xs="12">
        <el-card class="access" shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              工序信息
            </div>
            <div>
              <el-button
                type="primary"
                size="small"
                @click="dialogVisible = true"
              >
                添加
              </el-button>
              <el-button size="small" @click="edit">修改</el-button>
              <el-button type="danger" size="small" @click="del">
                删除当前
              </el-button>
            </div>
          </div>
          <div class="progress-bar1" style="margin: 20px">
            <li
              class=""
              :class="{ active: item.checked }"
              @click="setStep(index)"
              v-for="(item, index) in stepData"
              :key="index"
            >
              <span>{{ item.name }}</span>
            </li>
          </div>
          <div style="display: flex; flex-direction: row; height: 175px">
            <div
              style="width: 50%; height: 175px; background-color: aliceblue"
            ></div>
            <div style="width: 50%; height: 175px">
              <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item>
                  <template slot="label">零件编号</template>
                  零件编号
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">日期</template>
                  日期
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">机床型号</template>
                  机床型号
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">工序号</template>
                  工序号
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">Y坐标</template>
                  Y坐标
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">Z坐标</template>
                  Z坐标
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">电话</template>
                  电话
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">尺寸</template>
                  尺寸
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">装夹方式</template>
                  装夹方式
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">总时间</template>
                  总时间
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div>
            <el-table :data="getFoot()" style="width: 100%">
              <el-table-column prop="MarkVal" label="序号"></el-table-column>
              <el-table-column
                prop="PlaceNumVal"
                label="程序名"
              ></el-table-column>
              <el-table-column
                prop="ChangeFileNumVal"
                label="类别"
              ></el-table-column>
              <el-table-column prop="SignVal" label="刀号"></el-table-column>
              <el-table-column
                prop="DateVal"
                label="刀具名称"
              ></el-table-column>
              <el-table-column prop="Mark2Val" label="刀径"></el-table-column>
              <el-table-column
                prop="PlaceNum2Val"
                label="刀长"
              ></el-table-column>
              <el-table-column prop="date" label="刀刃"></el-table-column>
              <el-table-column prop="Sign2Val" label="余量"></el-table-column>
              <el-table-column prop="Date2Val" label="转速"></el-table-column>
              <el-table-column prop="Date2Val" label="进给"></el-table-column>
              <el-table-column prop="Date2Val" label="Z最深"></el-table-column>
              <el-table-column
                prop="Date2Val"
                label="时间（分）"
              ></el-table-column>
              <el-table-column prop="Date2Val" label="备注"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :close-on-click-modal="false"
      title="添加"
      :visible="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form ref="form" :inline="true" :model="form" label-width="150px">
        <el-form-item label="产品编号">
          <el-input v-model="form.ProductId" placeholder="产品编号"></el-input>
        </el-form-item>
        <el-form-item label="工序编号">
          <el-input v-model="form.OpId" placeholder="工序编号"></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="form" :inline="true" :model="TiTle" label-width="150px">
        <el-form-item label="产品编号">
          <el-input v-model="TiTle.ProductId" placeholder="产品编号"></el-input>
        </el-form-item>
        <el-form-item label="图纸编号">
          <el-input
            v-model="TiTle.BluePrintNo"
            placeholder="图纸编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序编号">
          <el-input
            v-model="TiTle.ProductName"
            placeholder="工序编号"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form
        ref="form"
        :inline="true"
        :model="ProductInfo"
        label-width="150px"
      >
        <el-form-item label="车间名">
          <el-input
            v-model="ProductInfo.WorkShop"
            placeholder="车间名"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序编号">
          <el-input
            v-model="ProductInfo.OpId"
            placeholder="工序编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序名称">
          <el-input
            v-model="ProductInfo.OpName"
            placeholder="工序名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="材料牌">
          <el-input
            v-model="ProductInfo.MaterialBrand"
            placeholder="材料牌"
          ></el-input>
        </el-form-item>
        <el-form-item label="毛坯类型">
          <el-input
            v-model="ProductInfo.MaterialType"
            placeholder="毛坯类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="毛坯外形尺寸">
          <el-input
            v-model="ProductInfo.MaterialSize"
            placeholder="毛坯外形尺寸"
          ></el-input>
        </el-form-item>
        <el-form-item label="毛坯可制作零件数">
          <el-input
            v-model="ProductInfo.MaterialToPartCount"
            placeholder="毛坯可制作零件数"
          ></el-input>
        </el-form-item>
        <el-form-item label="每台件数">
          <el-input
            v-model="ProductInfo.MachinePartCount"
            placeholder="每台件数"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="ProductInfo.DeviceName"
            placeholder="设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备型号">
          <el-input
            v-model="ProductInfo.DeviceModel"
            placeholder="设备型号"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input
            v-model="ProductInfo.DeviceId"
            placeholder="设备编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="同时加工件">
          <el-input
            v-model="ProductInfo.ProcessNum"
            placeholder="同时加工件"
          ></el-input>
        </el-form-item>
        <el-form-item label="夹具类型">
          <el-input
            v-model="ProductInfo.TrayType"
            placeholder="夹具类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="夹具名称">
          <el-input
            v-model="ProductInfo.CuttingFluid"
            placeholder="夹具名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="切削液">
          <el-input
            v-model="ProductInfo.TrayName"
            placeholder="切削液"
          ></el-input>
        </el-form-item>
        <el-form-item label="工位器具编号">
          <el-input
            v-model="ProductInfo.WorkstationAppliancesId"
            placeholder="工位器具编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="工位器具名称">
          <el-input
            v-model="ProductInfo.WorkstationAppliancesName"
            placeholder="工位器具名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="工时准终">
          <el-input
            v-model="ProductInfo.WorkHour"
            placeholder="工时准终"
          ></el-input>
        </el-form-item>
        <el-form-item label="工时单件">
          <el-input
            v-model="ProductInfo.OnePartWorkHour"
            placeholder="工时单件"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="Foot" :inline="true" :model="Foot" label-width="150px">
        <el-form-item label="标记1">
          <el-input v-model="Foot.MarkVal1" placeholder="标记1"></el-input>
        </el-form-item>
        <el-form-item label="标记2">
          <el-input v-model="Foot.MarkVal2" placeholder="标记2"></el-input>
        </el-form-item>
        <el-form-item label="处数1">
          <el-input v-model="Foot.PlaceNumVal1" placeholder="处数1"></el-input>
        </el-form-item>
        <el-form-item label="处数2">
          <el-input v-model="Foot.PlaceNumVal2" placeholder="处数2"></el-input>
        </el-form-item>
        <el-form-item label="更改文件号1">
          <el-input
            v-model="Foot.ChangeFileNum2Val1"
            placeholder="更改文件号1"
          ></el-input>
        </el-form-item>
        <el-form-item label="更改文件号2">
          <el-input
            v-model="Foot.ChangeFileNum2Val2"
            placeholder="更改文件号2"
          ></el-input>
        </el-form-item>
        <el-form-item label="签字1">
          <el-input v-model="Foot.Sign2Val1" placeholder="签字1"></el-input>
        </el-form-item>
        <el-form-item label="签字2">
          <el-input v-model="Foot.Sign2Val2" placeholder="签字2"></el-input>
        </el-form-item>
        <el-form-item label="日期1">
          <el-input v-model="Foot.Date2Val1" placeholder="日期1"></el-input>
        </el-form-item>
        <el-form-item label="设计日期">
          <el-input v-model="Foot.DesignVal" placeholder="设计日期"></el-input>
        </el-form-item>
        <el-form-item label="标准化日期">
          <el-input v-model="Foot.StandVal" placeholder="标准化日期"></el-input>
        </el-form-item>
        <el-form-item label="会签日期">
          <el-input
            v-model="Foot.CounterSignVal"
            placeholder="会签日期"
          ></el-input>
        </el-form-item>
      </el-form>
      <vab-form-table
        v-model="Steps"
        drag
        :row-template="rowTemplate"
        style="width: 100%"
      >
        <el-table-column align="center" label="工步号" prop="StepsId">
          <template #default="{ row }">
            <el-input v-model="row.StepsId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="刀具类型" prop="KnifeType">
          <template #default="{ row }">
            <el-input v-model="row.KnifeType" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="工步内容" prop="Content">
          <template #default="{ row }">
            <el-input v-model="row.Content" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="主轴转速"
          prop="RaSpindleSpeedngle"
        >
          <template #default="{ row }">
            <el-input v-model="row.SpindleSpeed" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="切削速度" prop="CuttingSpeed">
          <template #default="{ row }">
            <el-input v-model="row.CuttingSpeed" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="进给量" prop="Feed">
          <template #default="{ row }">
            <el-input v-model="row.Feed" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="切削深度" prop="DepthOfCut">
          <template #default="{ row }">
            <el-input v-model="row.DepthOfCut" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="进给次数" prop="NumberOfFeeds">
          <template #default="{ row }">
            <el-input v-model="row.NumberOfFeeds" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="机动时间" prop="TimeToManeuver">
          <template #default="{ row }">
            <el-input v-model="row.TimeToManeuver" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="辅助时间" prop="AssistedTime">
          <template #default="{ row }">
            <el-input v-model="row.AssistedTime" />
          </template>
        </el-table-column>
      </vab-form-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import VabFormTable from '@/extra/VabFormTable'
  import {
    ProductionIdsList,
    ProductAllOp,
    ProductNewlyOpFrm,
    ProductAllOpDelete,
    OpCard,
    FloBomListChart,
    ProductionInfo,
  } from '@/api/product'
  import img from './img.js'
  export default {
    components: { VabFormTable },
    data() {
      return {
        rowTemplate: {
          StepsId: '',
          KnifeType: '',
          Content: '',
          SpindleSpeed: '',
          CuttingSpeed: '',
          Feed: '',
          DepthOfCut: '',
          NumberOfFeeds: '',
          TimeToManeuver: '',
          AssistedTime: '',
        },
        Steps: [],
        tableData: [],
        form: {},
        OPCardInfo: {},
        TiTle: {},
        ProductInfo: {},
        Foot: {},
        dialogVisible: false,
        img,
        menuData: [],
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          MatchString: '',
        },
        total: 0,
        list: [],
        layout: 'total, sizes, prev, pager, next, jumper',

        stepData: [],
        ProductId: '',
        OpId: '',
      }
    },
    created() {
      this.initData()
    },
    methods: {
      del() {
        ProductAllOpDelete({ OpId: this.OpId, ProductId: this.ProductId }).then(
          (res) => {
            this.$baseMessage('删除成功', 'error', 'vab-hey-message-error')
          }
        )
      },
      edit() {
        OpCard({ OpId: this.OpId, ProductId: this.ProductId }).then((res) => {
          this.form.ProductId = res.ProductId
          this.form.OpId = res.OpId
          this.OpCardInfo = res.OpCardInfo
          this.TiTle = res.TiTle
          this.ProductInfo = res.ProductInfo
          this.Steps = res.Steps
          this.Foot = res.Foot
          this.dialogVisible = true
        })
      },
      getFoot() {
        return [
          {
            MarkVal: this.Foot.MarkVal1,
            PlaceNumVal: this.Foot.PlaceNumVal1,
            ChangeFileNumVal: this.Foot.ChangeFileNumVal1,
            SignVal: this.Foot.SignVal1,
            DateVal: this.Foot.DateVal1,
            Mark2Val: this.Foot.Mark2Val1,
            PlaceNum2Val: this.Foot.PlaceNum2Val1,
            ChangeFileNum2Val: this.Foot.ChangeFileNum2Val1,
            Sign2Val: this.Foot.Sign2Val1,
            Date2Val: this.Foot.Date2Val1,
          },
          {
            MarkVal: this.Foot.MarkVal2,
            PlaceNumVal: this.Foot.PlaceNumVal2,
            ChangeFileNumVal: this.Foot.ChangeFileNumVal2,
            SignVal: this.Foot.SignVal2,
            DateVal: this.Foot.DateVal2,
            Mark2Val: this.Foot.Mark2Val1,
            PlaceNum2Val: this.Foot.PlaceNum2Val2,
            ChangeFileNum2Val: this.Foot.ChangeFileNum2Val2,
            Sign2Val: this.Foot.Sign2Val2,
            Date2Val: this.Foot.Date2Val2,
          },
        ]
      },
      submit() {
        this.OPCardInfo = {
          TiTle: this.TiTle,
          ProductInfo: this.ProductInfo,
          Steps: this.Steps,
          Foot: this.Foot,
        }
        this.form.OpCardInfo = this.OPCardInfo
        ProductNewlyOpFrm(this.form).then((res) => {
          console.log('resres', res)
          this.dialogVisible = false
        })
      },
      setStep(index) {
        this.stepData.map((v) => {
          v.checked = false
          return v
        })
        this.stepData[index].checked = true
        this.OpId = this.stepData[index].name
        FloBomListChart({ OpId: this.OpId, ProductId: this.ProductId }).then(
          (res) => {
            console.log('res', res)
            this.form.ProductId = res.ProductId
            this.form.OpId = res.OpId
            this.OpCardInfo = res.OpCardInfo
            this.TiTle = res.TiTle
            this.ProductInfo = res.ProductInfo
            this.Steps = res.Steps
            this.Foot = res.Foot
          }
        )
      },
      handleClose(done) {
        done()
      },
      handleOpen(ProductId) {
        this.fetchData2(ProductId)
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData2()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData2()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData2()
      },
      fetchData1() {
        ProductionIdsList({ Index: 0, Count: 10 }).then((res) => {
          this.menuData = res.Productions
          this.fetchData2(res.Productions[0])
        })
      },
      fetchData2(ProductId) {
        this.ProductId = ProductId
        // ProductAllOp({ ProductId }).then((res) => {
        //   this.stepData = res.ProductAllOp.map((v) => {
        //     return {
        //       name: v,
        //       checked: false,
        //     }
        //   })
        //   console.log('this.stepDatathis.stepData', this.stepData)
        // })
        ProductionInfo({ ProductId }).then((res) => {
          // this.tableData = res.ProductInfo
        })
      },
      initData() {
        this.fetchData1()
      },
    },
  }
</script>

<style>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .progress-bar1 li {
    padding: 0px 20px;
    line-height: 40px;
    background: #999;
    display: inline-block;
    color: #fff;
    position: relative;
    width: 180px;
    text-align: center;
    cursor: pointer;
  }

  .progress-bar1 li:after {
    content: '';
    display: block;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #999;
    position: absolute;
    right: -20px;
    top: 0;
    z-index: 10;
  }

  .progress-bar1 li:before {
    content: '';
    display: block;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #fff;
    position: absolute;
    left: 0px;
    top: 0;
  }

  .progress-bar1 li {
    padding-left: 25px;
  }

  .progress-bar1 li:first-child {
    border-radius: 4px 0 0 4px;
  }

  .progress-bar1 li:first-child:before {
    display: none;
  }

  .progress-bar1 li.active {
    background-color: #1890ff;
  }

  .progress-bar1 li.active:after {
    border-left-color: #1890ff;
  }
</style>
